<template>
  <div>
    <!-- 各级分类选择 -->
    <CategorySelector :disabled="isShow !== 1" />
    <SpuList
      v-if="isShow === 1"
      @isShow="isShow = $event"
      @editSpu="editSpu = $event"
      @spu="spu = $event"
    />
    <SaveSpu v-if="isShow === 2" :editSpu="editSpu" @isShow="isShow = $event" />
    <SaveSku v-if="isShow === 3" :spu="spu" @isShow="isShow = $event"></SaveSku>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import SpuList from './components/SpuList'
import SaveSpu from './components/SaveSpu'
import SaveSku from './components/SaveSku.vue'

export default {
  name: 'Spu',
  components: {
    SpuList,
    SaveSpu,
    SaveSku
  },
  data() {
    return {
      // 1.显示SpuList组件，默认展示
      // 2.显示SaveSpu组件
      // 3.显示SaveSku组件
      isShow: 1,
      // 修改spu属性时，兄弟组件之间传递的数据，row中传递的数据是服务器响应的数据，
      // 数据中spuImageList和spuSaleAttrList都为null,为了防止报错，需要传入初始值
      editSpu: {
        spuImageList: [],
        spuSaleAttrList: []
      },
      // 传递给SaveSku组件的spu数据
      spu: {}
    }
  },
  // 管理切换时组件卸载，清空vuex中数据
  beforeDestroy() {
    this.CLEAR_VUEX()
  },
  methods: {
    ...mapMutations('category', ['CLEAR_VUEX'])
  }
}
</script>

<style></style>
